<template>
  <div>
    <div style="background: rgba(33,10,16,0.13);height: 40px">
<!--      <el-dropdown style="margin-top: 8px">-->
        <el-link style="font-size: 17px;margin-left: 120px;margin-top: 10px" v-on:click="IndexLayout">首页</el-link>
<!--  <span style="margin-left: 150px;font-size: 17px;margin-top: 8px">-->
<!--    中国大陆-->
<!--    <i class="el-icon-arrow-down"></i>-->
<!--  </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item>全球</el-dropdown-item>-->
<!--          <el-dropdown-item divided>中国大陆</el-dropdown-item>-->
<!--          <el-dropdown-item>中国香港</el-dropdown-item>-->
<!--          <el-dropdown-item>中国台湾</el-dropdown-item>-->
<!--          <el-dropdown-item>中国澳门</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
      <span>&nbsp;&nbsp;</span>
      <el-link style="font-size: 17px;margin-top: 10px" v-on:click="register">注册</el-link>
      <span>&nbsp;&nbsp;</span>
      <el-link style="font-size: 17px;margin-top: 10px" v-on:click="login">登录</el-link>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <el-link href="#" style="font-size: 17px;margin-top: 10px">手机App</el-link>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <el-link href="#" style="font-size: 17px;margin-top: 10px">网页无障碍</el-link>

      <el-dropdown style="float: right;font-size: 17px;margin-right: 150px;margin-top: 8px">
  <span class="el-dropdown-link">
    联系客服
    <i class="el-icon-arrow-down"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>消费者客服</el-dropdown-item>
          <el-dropdown-item>卖家客服</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="float: right">&nbsp;&nbsp;&nbsp;</span>
      <el-dropdown style="float: right;font-size: 17px;margin-top: 8px">
  <span class="el-dropdown-link">
    卖家中心
    <i class="el-icon-arrow-down"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>开店入驻</el-dropdown-item>
          <el-dropdown-item>已卖出的宝贝</el-dropdown-item>
          <el-dropdown-item>出售中的宝贝</el-dropdown-item>
          <el-dropdown-item>卖家服务市场</el-dropdown-item>
          <el-dropdown-item>卖家培训中心</el-dropdown-item>
          <el-dropdown-item>体验中心</el-dropdown-item>
          <el-dropdown-item>电商培训中心</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="float: right">&nbsp;&nbsp;</span>
      <el-link v-on:click="order" style="float: right;font-size: 17px;margin-top: 11px" class="el-icon-s-order">我的订单
      </el-link>
      <span style="float: right">&nbsp;&nbsp;</span>
      <el-link v-on:click="cart" style="float: right;font-size: 17px;margin-top: 11px" class="el-icon-shopping-cart-2">购物车
      </el-link>
      <span style="float: right">&nbsp;&nbsp;</span>
      <el-link href="#" style="float: right;font-size: 17px;margin-top: 11px" class="el-icon-star-on">收藏夹</el-link>
      <span style="float: right">&nbsp;&nbsp;</span>
      <span class="el-icon-s-custom" v-if="userName==null"
            style="float: right;font-size: 16px;margin-top: 11px;color: rgba(54,51,51,0.92)">欢迎，请先登录</span>
      <span v-else="">
      <el-dropdown style="float: right;font-size: 17px;margin-top: 8px">
      <span class="el-icon-s-custom">你好！{{userName}}</span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <el-link v-on:click="centerLayout" class="el-icon-user">个人中心</el-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <el-popconfirm
            confirm-button-text='是的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="您确认要注销吗？"
            v-on:confirm="logOut()"
          >
            <el-button slot="reference" type="text">注销</el-button>

          </el-popconfirm>
        </el-dropdown-item>
      </el-dropdown-menu>
      </el-dropdown>
        </span>
    </div>
    <div style="height: 100px;width: 100%">
      <div style="float: left;margin-left: 200px;margin-top: 16px">
        <img width="150px" height="70px" src="../../../assets/logo.jpg">
      </div>
      <div class="container">
        <form action="" class="parent">
          <!--          <input type="text" style="border-color: #000000">-->
<!--          <el-row>-->
            <el-input type="text" style="border-color: #000000;width: 400px;border-radius: 50%" placeholder="请输入"
                      v-model="input"></el-input>
            <button style="color: black;width: 80px;height:40px ">搜索</button>
<!--          </el-row>-->

        </form>

      </div>
    </div>
    <GuideMenu></GuideMenu>
  </div>
</template>

<script>
  import GuideMenu from "../parts/GuideMenu";

  export default {
    name: "Head",
    components: {
      GuideMenu: GuideMenu,
    },
    data()
    {
      return {
        input: '',
        userName: window.sessionStorage.getItem("userName")
      }
    },
    methods: {
      register()
      {
        this.$router.push({path: "/UserRegister"});
      },
      IndexLayout(){
        this.$router.push({path:"/"})
      },
      login()
      {
        this.$router.push({path: "/UserLogin"});
      },
      logOut: function ()
      {
        sessionStorage.clear()
        this.$router.push("/");
        window.location.reload()
      },
      centerLayout()
      {
        this.$router.push({path: "/Information"});
      },
      order()
        {
          var totalPrice = 0.0;
          totalPrice = this.num * this.price;
          let id = window.sessionStorage.getItem("id");
          if (id == null)
          {
            console.log(123);
            //未登录
            /*      window.sessionStorage.setItem("id", " ");*/
            this.$router.push({path: "/UserLogin"})
          } else
          {
            this.$router.push({path: "/order"})
          }
      },
      cart()
      {
        var totalPrice = 0.0;
        totalPrice = this.num * this.price;
        let id = window.sessionStorage.getItem("id");
        if (id == null)
        {
          console.log(123);
          //未登录
          /*      window.sessionStorage.setItem("id", " ");*/
          this.$router.push({path: "/UserLogin"})
        } else
        {
          this.$router.push({path: "/Cart"})
        }
    }
  }}
</script>

<style scoped>
  .container
  {
    width: 500px;
    height: 50px;
    float: right;
    margin-top: 20px;
    margin-right: 180px;
    /*border: solid black;*/
  }

  .parent
  {
    width: 100%;
    height: 42px;
    top: 4px;
    position: relative;
  }

  .parent > input:first-of-type
  {
    /*输入框高度设置为40px, border占据2px，总高度为42px*/
    width: 380px;
    height: 40px;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
  }

  .parent > input:first-of-type:focus
  {
    padding-left: 10px;
  }

  .parent > input:last-of-type
  {
    /*button按钮border并不占据外围大小，设置高度42px*/
    width: 100px;
    height: 44px;
    position: absolute;
    background: black;
    font-size: 16px;
    outline: none;
  }
</style>
